<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table>
        <thead>
            <tr>
                <th>品牌名称</th>
                <th>商品数量</th>
               <th>平均价格</th>
            </tr>
        </thead>
        <tbody>
        <tr v-for="agg in aggList">
            <td>{{agg.brand}}</td>
            <td>{{agg.num}}</td>
            <td>{{agg.avg}}</td>
        </tr>
    </table>
    <div id="myChart" :style="{width: '300px', height: '300px'}">

    </div>

</div>

</body>
<script src="/static/vue.min.js"></script>
<script src="/static/axios.min.js"></script>
<script src="/static/echarts.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            aggList:[],
            xArray:[],
            yArray:[]
        },
        methods:{
            getGoodsList(){
                self=this;
                axios.get("/search/aggBrand").then(function (res) {
                    console.log("res",res);
                   self.aggList= res.data;
                   self.aggList.forEach(agg=>{
                       self.xArray.push(agg.brand);
                       self.yArray.push(agg.num);
                   })

                   self.drawLine();
                })
            },
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    title: { text: '在Vue中使用echarts' },
                    tooltip: {},
                    xAxis: {
                        data: this.xArray
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: this.yArray
                    }]
                });
            }

        },
        mounted(){
            this.getGoodsList();
           // this.drawLine();
        }

    });
</script>

</html>